﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>张萍的作品集</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">

</head>
<body>

<div id="carousel-example-generic" class="carousel slide">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" id="middle-item-001">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.001.jpeg" alt="001">
        </div>
        <div class="item" id="middle-item-002">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.002.jpeg" alt="002">
        </div>
        <!-- todo remove start -->
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.003.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.004.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.005.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.006.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.007.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.008.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.009.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.010.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.011.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.012.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.013.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.014.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.015.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.016.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.017.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.018.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.019.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.020.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.021.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.022.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.023.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.024.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.025.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.026.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.027.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.028.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.029.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.030.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.031.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.032.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.033.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.034.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.035.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.036.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.037.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.038.jpeg" alt="002">
        </div>
        <div class="item">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.039.jpeg" alt="002">
        </div>
        <!-- todo remove end -->
        <div class="item" id="middle-item-040">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.040.jpeg" alt="040">
        </div>
        <div class="item" id="middle-item-041">
            <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.041.jpeg" alt="041">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" style="color: red" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" style="color: red" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
    $(function() {
        $('.carousel').carousel({interval: 2000, pause: "hover"});
        lazyLoading();
    });

    function lazyLoading() {
        for (var i=3; i<40; i++) {
            var newId = generateId(i);
            var img = '<div class="item" id="middle-item-'+ newId +'">' +
            '    <img src="http://jane.janescott.cn:71/profolio/UI%E4%BD%9C%E5%93%81%E9%9B%86-%E5%BC%A0%E8%90%8D.'+ newId +'.jpeg" alt="'+ newId +'">' +
            '</div>';

            $('#middle-item-' + generateId(i-1)).append(img);
        }
    }

    function generateId(id) {
        if (id < 10) {
            return '00' + id;
        } else {
            return '0' + id;
        }
    }
</script>
</html>